<template>
  <div class="box_main_json_sender">
    <el-dialog v-model="dialogFormVisible" title="配送员审核" width="500">
      <el-form :model="form">
        <el-form-item label="配送员名称" :label-width="formLabelWidth">
          {{ form.name }}
        </el-form-item>
        <el-form-item label="审核状态" :label-width="formLabelWidth">
          <el-select-v2
            v-model="form.isPass"
            :options="isPassOptions"
            placeholder="Please select"
            size="large"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">{{
          senderEInfo.phone
        }}</el-form-item>
        <el-form-item label="身份证" :label-width="formLabelWidth">
          <el-image style="width: 100px" :src="senderEInfo.IdcardImg" fit="cover" />
        </el-form-item>
        <el-form-item label="学生证" :label-width="formLabelWidth">
          <el-image style="width: 100px" :src="senderEInfo.studentCardImg" fit="cover" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="ChooseSenderApply"> 确认审核 </el-button>
        </div>
      </template>
    </el-dialog>

    <el-table :data="tableData" height="70vh" style="width: 100%">
      <el-table-column label="配送员名称">
        <template #default="scope">
          {{ scope.row.userId.name }}
        </template>
      </el-table-column>
      <el-table-column prop="inputTime" label="申请时间" width="180" />
      <el-table-column label="审核状态">
        <template #default="scope">
          {{
            scope.row.isPass == 0
              ? "待审核"
              : scope.row.isPass == 1
              ? "通过审核"
              : scope.row.isPass == 2
              ? "审核未通过"
              : "未知"
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="ChooseSender(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageItem"
      :page-sizes="[20, 50, 100, 200]"
      background="blue"
      layout="total, sizes, prev, pager, next, jumper"
      :total="20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
const formLabelWidth = "140px";
const tableData = ref([]);
const page = ref(1);
const pageTotal = ref(0);
const pageItem = ref(20);
const token = localStorage.getItem("order_auth_token");
const dialogFormVisible = ref(false);
const form = reactive({
  senderId: "",
  isPass: 0,
  name: "",
});
const isPassOptions = [
  {
    label: "待审核",
    value: 0,
  },
  {
    label: "通过审核",
    value: 1,
  },
  {
    label: "审核不通过",
    value: 2,
  },
];

const senderEInfo = reactive({
  phone: "",
  IdcardImg: "",
  studentCardImg: "",
});

const ChooseSenderApply = () => {
  const req = {
    senderId: form.senderId,
    isPass: form.isPass,
  };
  axios
    .post("/api/sender/audit", req, {
      headers: {
        token: token,
      },
    })
    .then((res) => {
      // console.log("code line-106 \n\r😍 res:\n\r", res);
      if (res.data.success) {
        ElMessage({
          type: "success",
          message: "操作成功",
        });
      } else {
        ElMessage({
          type: "error",
          message: "操作失败",
        });
      }
      (form.isPass = 0), (form.name = ""), (form.senderId = "");
      getSenderInfo();
      dialogFormVisible.value = false;
    })
    .catch((err) => {
      console.log("code line-110 \n\r😁 err:\n\r", err);
      ElMessage({
        type: "error",
        message: "操作失败",
      });
    });
};
const getSenderInfo = () => {
  axios
    .get("/api/sender/query/school/" + page.value + "/" + pageItem.value, {
      headers: {
        token: token,
      },
    })
    .then((res) => {
      // console.log("code line-30 \n\r😑 res:\n\r", res);
      const msg = res.data.message.list;
      for (let index = 0; index < msg.length; index++) {
        const el = msg[index];
        el.userId = JSON.parse(el.userId);
      }
      tableData.value = msg;

      pageTotal.value = res.data.message.total;
    })
    .catch((err) => {
      console.log("code line-34 \n\r😌 :\n\r");
    });
};
const ChooseSender = (row) => {
  form.senderId = row.senderId;
  form.isPass = row.isPass;
  form.name = row.userId.name;
  axios
    .get("/api/examineSender/examine/" + row.senderId, {
      headers: {
        token: token,
      },
    })
    .then((res) => {
      // console.log("code line-169 \n\r😑 res:\n\r", res);
      if (res.data.success) {
        const msg = res.data.message;
        senderEInfo.IdcardImg = msg.idcardImg;
        senderEInfo.studentCardImg = msg.studentImg;
        senderEInfo.phone = msg.phone;
      } else {
        ElMessage({
          type: "error",
          message: res.data.message,
        });
      }
    })
    .catch((err) => {});

  dialogFormVisible.value = true;
};
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageItem.value = val;
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  page.value = val;
};

getSenderInfo();
// setInterval(getSenderInfo, 3000);
</script>

<style lang="scss" scoped>
.box_main_json_sender {
  height: 100%;
  width: 100%;
}
</style>
